<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卖座详情</title>
    <link rel="stylesheet" href="css/manage.css">
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        /* 设置页面右上角关闭叉叉样式 */
        .close {
            display: inline-block;
            position: absolute;
            right: 30px;
        }
        .close:hover {
            color: red;
        }
        /*  座位已选状态 */
        .optional {
            background: url(images/optional.png) no-repeat;
        }
        /* 座位已售状态 */
        .selected {
            background: url(images/selected.png) no-repeat;
        }
    </style>
</head>
<body>

    <div width="100%" style="margin-top:10px;margin-botton:30px">
        <label style="font-size:25px;color:goldenrod;margin-left: 70px;" id="showId"></span></label>
        <label style="font-size:25px;color:goldenrod;margin-left: 70px;" id="filmName"></span></label>
        <label style="font-size:25px;color:goldenrod;margin-left: 70px;" id="hallName"></span></label>
        <!-- <button class="layui-btn" style="margin-left: 120px;">卖座详情<span class="layui-badge-dot layui-bg-orange"></span></button> -->
        
		<a href="show_list.html">
			<div class="close"><i class="layui-icon" style="font-size:20px;font-weight:bold;margin-right: 30px;" title="关闭">&#x1006;</i>
			</div>
		</a>
	</div>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

    </fieldset>
    <div id="show-more">
        <div id="seat-main" >
            
            <div class="hall">
                <div class="hall-example">
                    <div class="seat-null">
                        <span>可选座位</span>
                    </div>
                    <div class="seat-selected">
                        <span>已售座位</span>
                    </div>
                    <div class="seat-optional">
                        <span>已选座位</span>
                    </div>
                
                </div>
    
                <div class="hall-main">
                    <div class="row-num">
                        <!-- 控制行数 -->
                        <span v-for="(s,i) in seats" class="row-num-id">{{i+1}}</span>
    
                    </div>
                    <div class="seats-container">
                        <div class="seats-tv">
                            <div class="seats-tv-text">银幕中央</div>
                            <div class="seats-tv-line"></div>
                        </div>
                        <div class="seats-wrapper">
    
                            <!-- 控制行 -->
                            <div class="row" v-for="(pai,i) in seats">
                                <!-- 控制列 -->
                                <span class="seat-id" v-for="(s,j) in pai" :key="j" :class="{optional:s.status==1,selected:s.status==2}">
                                    {{s.seatRow}}排{{s.seatCol}}座
                                </span>
    
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>

            <div class="side">

                <p>
                    <span class="aa">已售票数：</span>
                    <span class="bb">{{yes}}</span>
                </p>

                <p style="margin-top: 10px;margin-bottom: 10px;">
                    <span class="aa">剩余票数：</span>
                    <span class="bb">{{no}}</span>
                </p>

                <p style="margin-left: 20px;">
                    <span class="aa">总票数：</span>
                    <span class="bb">{{yes+no}}</span>
                </p>
            </div>
        </div>
    </div>
    
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/show-more.js"></script>
</body>
</html>